<template>
  <a-card :bordered="false">
    <!-- table区域-begin -->
    <div>
      <a-row :gutter="10">
        <a-col :md="4" >
          <vxe-table
            ref="vxeTableTree"
            :height="height"
            show-overflow
            highlight-hover-row
            row-key
            :show-header="false"
            :data="tableData"
            :radio-config="{ labelField: 'title',}"
            :tree-config="{ children: 'children', line: true}"
            @radio-change="radioChange"
          >
            <vxe-column type="radio" tree-node></vxe-column>
          </vxe-table>
        </a-col>
        <a-col :md="20">
          <!-- 查询区域 -->
          <div class="table-page-search-wrapper">
            <a-form layout="inline" @keyup.enter.native="searchQuery">
              <a-row :gutter="24">
                <a-col :md="8" :sm="8">
                  <a-form-item label="合同编号">
                    <a-input style="width:100%;" placeholder="请输入合同编号" v-model="queryParam.contractCode"></a-input>
                  </a-form-item>
                </a-col>
                <a-col :md="8" :sm="8" >
                  <a-form-item label="业主名称">
                    <a-input style="width:100%;" placeholder="请输入业主名称" v-model="queryParam.contractOwnerName"></a-input>
                  </a-form-item>
                </a-col>
                <template v-if="toggleSearchStatus">
                  <a-col :md="8" :sm="8" >
                    <a-form-item label="房源状态">
                      <j-dict-select-tag type="list" v-model="queryParam.houseStatus" dictCode="park_housing_condition" placeholder="请选择房源状态"/>
                    </a-form-item>
                  </a-col>
                  <a-col :md="8" :sm="8">
                    <a-form-item label="签订日期" style="width:100%;">
                      <j-date placeholder="开始日期" v-model="queryParam['contractSigningDate_begin_str']" style="width:calc(50% - 15px);"></j-date>
                      <span class="group-query-strig">~</span>
                      <j-date placeholder="结束日期" v-model="queryParam['contractSigningDate_end_str']" style="width:calc(50% - 15px);"></j-date>
                    </a-form-item>
                  </a-col>
                  <a-col :md="8" :sm="8">
                      <a-form-item label="合同有效期" style="width:100%;">
                        <j-date placeholder="开始日期" v-model="queryParam['contractEndDate_begin_str']" style="width:calc(50% - 15px);"></j-date>
                        <span class="group-query-strig">~</span>
                        <j-date placeholder="结束日期" v-model="queryParam['contractEndDate_end_str']" style="width:calc(50% - 15px);"></j-date>
                      </a-form-item>
                  </a-col>
                  <a-col :md="8" :sm="8">
                    <a-form-item label="房源编码">
                      <a-input placeholder="请输入房源编码" v-model="queryParam.houseCode"></a-input>
                    </a-form-item>
                  </a-col>
                </template>

                <a-col :md="8" :sm="8">
                  <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                    <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                    <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
                    <a @click="handleToggleSearch" style="margin-left: 8px">
                      {{ toggleSearchStatus ? '收起' : '展开' }}
                      <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
                    </a>
                  </span>
                </a-col>
              </a-row>
            </a-form>
          </div>
          <!-- 查询区域-END -->
          <vxe-grid
            ref="vxeTable"
            v-bind="options"
            :columns="columns"
            :data="dataSource"
          >
            <template v-slot:toolbar_buttons>
              <div style="font-size:16px;">
                <span>出租率：<b>{{houseInfo.rentAreaPercent || '0%'}}</b>;</span>
                <span>出租面积：<b>{{houseInfo.rentPercent || '0%'}}</b>;</span>
                <span>租赁套数：<b>{{houseInfo.leaseNums || '0'}}</b>套;</span>
                <span>租赁面积：<b>{{houseInfo.leaseAreas || '0'}}</b>㎡;</span>
              </div>
              <div style="font-size:16px;">
                <span>销售套数：<b>{{houseInfo.saleNums || '0'}}</b>套;</span>
                <span>销售面积：<b>{{houseInfo.saleAreas || '0'}}</b>㎡;</span>
                <span>空置套数：<b>{{houseInfo.vacantNums || '0'}}</b>套;</span>
                <span>空置面积：<b>{{houseInfo.vacantAreas || '0'}}</b>㎡;</span>
              </div>
            </template>
            <template #imgSlot="{row,column}">
              <a v-if="row[column.property]" @click="handleOpen(row[column.property])">查看</a>
            </template>
            <template v-slot:pager>
              <vxe-pager
                :layouts="layouts"
                :current-page.sync="ipagination.currentPage"
                :page-size.sync="ipagination.pageSize"
                :total="ipagination.total"
                @page-change="handlePageChange"
              >
              </vxe-pager>
            </template>
          </vxe-grid>
        </a-col>
      </a-row>
    </div>
    <a-modal width="80%" :visible="previewVisible" :footer="null" @cancel="handleCancel()">
      <img alt="example" style="width: 100%" :src="previewImage"/>
    </a-modal>
  </a-card>
</template>

<script>

import { VxeTableMixin } from '@/mixins/VxeTableMixin'
import { getAction } from '@/api/manage'
import JDate from '@/components/jeecg/JDate'
import { filterObj } from '@/utils/util'
import { filterDictTextByCache } from '@/components/dict/JDictSelectUtil'
import { getFileAccessHttpUrl } from '@/api/manage'
import moment from 'moment'
export default {
  name: 'XyParkHouseSaleList',
  components: {
    JDate
  },
  mixins: [VxeTableMixin],
  data() {
    return {
      description: '房源信息销控表',
      columns: [
        { type: 'checkbox', width: 50 },
        { type: 'seq', width: 60 },
        { title: '房源编号', field: 'houseCode', showOverflow: true, width: 100 },
        { title: '楼宇名称', field: 'buildingName', showOverflow: true, width: 100 },
        { title: '项目名称', field: 'projectName', showOverflow: true, width: 100 },
        { title: '业主名称', field: 'contractOwnerName', showOverflow: true, width: 100 },
        { title: '楼层', field: 'floor', showOverflow: true, width: 60 },
        { title: '建筑面积(㎡)', field: 'buildingArea', showOverflow: true, width: 120 },
        { title: '房源状态', field: 'houseStatus', showOverflow: true, width: 100, slots: { default: ({ row }) => {
          return filterDictTextByCache('park_housing_condition', row.houseStatus)
        } }},
        {
          title: '租赁合同',
          children: [
            { title: '租赁合同编号', field: 'contractCode', showOverflow: true, width: 120 },
            { title: '租赁签订日期', field: 'contractSigningDate', showOverflow: true, width: 120, slots: { default: ({ row }) => {
              return row.contractSigningDate ? moment(row.contractSigningDate).format('YYYY-MM-DD') : ''
            } }},
            { title: '租赁合同有效期', field: 'contractEndDate', showOverflow: true, width: 120, slots: { default: ({ row }) => {
              return row.contractEndDate ? moment(row.contractEndDate).format('YYYY-MM-DD') : ''
            } }}
          ]
        },
        {
          title: '物业合同',
          children: [
            { title: '物业合同编号', field: 'propertyContractCode', showOverflow: true, width: 120 },
            { title: '物业签订日期', field: 'propertyContractSigningDate', showOverflow: true, width: 120, slots: { default: ({ row }) => {
              return row.propertyContractSigningDate ? moment(row.propertyContractSigningDate).format('YYYY-MM-DD') : ''
            } }},
            { title: '物业合同有效期', field: 'propertyContractEndDate', showOverflow: true, width: 120, slots: { default: ({ row }) => {
              return row.propertyContractEndDate ? moment(row.propertyContractEndDate).format('YYYY-MM-DD') : ''
            } }}
          ]
        },
        { title: '销控图', field: 'saleDraw', showOverflow: true, width: 100, slots: { default: 'imgSlot' }},
        { title: '平面图', field: 'planeDraw', showOverflow: true, width: 100, slots: { default: 'imgSlot' }}
        // { title: '合同金额', field: 'contractAmount', showOverflow: true, width: 100 }
      ],
      dictOptions: {},
      houseInfo: {
        rentAreaPercent: '0.00%',
        rentPercent: '0.00%',
        saleAreas: '',
        saleNums: '',
        leaseAreas: '',
        leaseNums: '',
        vacantAreas: '',
        vacantNums: ''
      },
      tableData: [],
      url: {
        treeList: 'community/xyParkHouse/getHouseTree',
        list: '/community/xyParkHouse/queryHouseContractListByTreeNode'
      },
      height: 400,
      radioData: {},
      queryParam: {},
      previewVisible: false,
      previewImage: ''
    }
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  mounted() {
    this.loadTreeData()
    this.loadData()
    setTimeout(() => {
      if (this.$refs.vxeTable) {
        const clientHeight = document.documentElement.clientHeight
        const tableTop = this.$refs.vxeTable.$el.getBoundingClientRect().top
        this.height = clientHeight - tableTop - 40
      }
    }, 100)
  },
  methods: {
    loadTreeData() {
      this.spinning = true
      getAction(this.url.treeList).then(res => {
        if (res.success) {
          this.tableData = res.result
          this.setParentId(this.tableData)
        } else {
          this.$message.error(res.message)
        }
        this.spinning = false
      })
    },
    loadData() {
      this.loading = true
      const param = this.getQueryParams()
      getAction(this.url.list, param).then(res => {
        if (res.success) {
          this.dataSource = res.result.records
          this.ipagination.total = res.result.total
          this.houseInfo = {
            rentAreaPercent: res.result.rentAreaPercent,
            rentPercent: res.result.rentPercent,
            saleAreas: res.result.saleAreas,
            saleNums: res.result.saleNums,
            leaseAreas: res.result.leaseAreas,
            leaseNums: res.result.leaseNums,
            vacantAreas: res.result.vacantAreas,
            vacantNums: res.result.vacantNums
          }
        } else {
          this.$message.error(res.message)
        }
        this.loading = false
      })
    },
    setParentId(list, parent) {
      list.forEach(item => {
        item.parentIds = parent ? parent.parentIds + ',' + item.id : item.id
        item.children && this.setParentId(item.children, item)
      })
    },
    radioChange({ row }) {
      this.radioData = row
      this.loadData(1)
    },
    getQueryParams() {
      // 获取查询条件
      let queryParam = {}
      if (Object.keys(this.radioData).length) {
        const codes = this.radioData.parentIds.split(',')
        queryParam = {
          project: codes[0] || null,
          building: codes[1] || null,
          floor: codes[2] || null
        }
      }
      var param = Object.assign({}, queryParam, this.queryParam, this.isorter, this.filters)
      param.field = this.getQueryField()
      param.pageNo = this.ipagination.currentPage
      param.pageSize = this.ipagination.pageSize
      return filterObj(param)
    },
    toTree(data) {
      const result = []
      if (!Array.isArray(data)) {
        return result
      }
      data.forEach(item => {
        delete item.children
      })
      const map = {}
      data.forEach(item => {
        map[item.id] = item
      })
      data.forEach(item => {
        const parent = map[item.pid]
        if (parent) {
          (parent.children || (parent.children = [])).push(item)
        } else {
          result.push(item)
        }
      })
      return result
    },
    handleOpen(url) {
      console.log(url)
      this.previewImage = getFileAccessHttpUrl(url)
      this.previewVisible = true
    },
    handleCancel() {
      this.previewVisible = false
    }
  }
}
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>
